<template>
  <div class="patient-view-page">
    <van-nav-bar 
      title="添加就诊人" 
      left-arrow 
      @click-left="onBack">
    </van-nav-bar>
    <div class="form-section">
      <van-cell-group>
        <van-field
          v-model="form.relation"
          is-link
          readonly
          label="关系"
          placeholder="请选择与本人关系"
          @click="showRelation = true"
        />
        <van-field
          v-model="form.name"
          label="姓名"
          placeholder="请输入真实姓名"
          maxlength="20"
        />
        <van-field
          v-model="form.idCardType"
          is-link
          readonly
          label="证件类型"
          placeholder="请选择证件类型"
          @click="showIdType = true"
        />
        <van-field
          v-model="form.idCard"
          label="证件号码"
          placeholder="输入证件号码"
          maxlength="18"
        />
        <van-field
          v-model="form.patientId"
          label="就诊卡号"
          placeholder="请输入就诊卡号"
        />
        <van-field
          v-model="form.phone"
          label="手机号码"
          placeholder="请输入手机号码"
          maxlength="11"
        />
        <van-field
          v-model="form.address"
          label="就诊人地址"
          placeholder="请输入就诊人地址"
          type="textarea"
          rows="2"
          autosize
        />
      </van-cell-group>
      <div class="submit-btn">
        <van-button type="primary" block round @click="onSubmit" :loading="loading">保存</van-button>
      </div>
    </div>
    <!-- 选择关系弹窗 -->
    <van-action-sheet
      v-model:show="showRelation"
      :actions="relationList"
      @select="onSelectRelation"
      title="选择与本人关系"
      cancel-text="取消"
      :close-on-click-action="false"
      class="custom-action-sheet"
    />
    <!-- 选择证件类型弹窗 -->
    <van-action-sheet v-model:show="showIdType" :actions="idTypeOptions" @select="onSelectIdType" cancel-text="取消" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { axioswmedical } from '@/http/axiosWrite';
import { useUserStore } from '@/stores/counter';
import type { ActionSheetAction } from 'vant';

const router = useRouter();
const userStore = useUserStore();

const onBack = () => {
  router.back();
};

onMounted(() => {
  userStore.loadUserInfo();
  console.log('当前登录用户ID:', userStore.accountId);
  if (!userStore.accountId) {
    showToast('请先登录');
    router.push('/login');
  } else {
    form.accountId = userStore.accountId;
  }
});

const form = reactive({
  relation: '',
  name: '',
  idCardType: '',
  idCard: '',
  patientId: '',
  phone: localStorage.getItem('phone') || '',
  address: '',
  accountId: ''
});

const loading = ref(false);

const showRelation = ref(false);
const showIdType = ref(false);

// 用你给的list风格
const relationList: ActionSheetAction[] = [
  { name: '本人' },
  { name: '子女' },
  { name: '夫妻' },
  { name: '父母' },
  { name: '朋友' }
];

function onSelectRelation(action: ActionSheetAction) {
  form.relation = action.name as string;
  showRelation.value = false;
}

const idTypeOptions = [
  { name: '身份证' },
  { name: '户口本' },
  { name: '护照' },
  { name: '军官证' },
  { name: '其他' }
];

const onSelectIdType = (option: ActionSheetAction) => {
  form.idCardType = option.name as string;
  showIdType.value = false;
};

const validate = () => {
  if (!userStore.accountId) return '账号ID不能为空，请重新登录';
  if (!form.relation) return '请选择与本人关系';
  if (!form.name) return '请输入真实姓名';
  if (!form.idCardType) return '请选择证件类型';
  if (!form.idCard) return '请输入证件号码';
  if (!form.phone) return '请输入手机号码';
  return '';
};

const onSubmit = async () => {
  const msg = validate();
  if (msg) {
    showToast(msg);
    return;
  }
  loading.value = true;
  try {
    console.log('提交时的accountId:', userStore.accountId);
    const res = await axioswmedical.post('/api/Patient/AddPatient', {
      relation: form.relation,
      name: form.name,
      idCardType: form.idCardType,
      idCard: form.idCard,
      patientId: form.patientId,
      phone: form.phone,
      address: form.address,
      accountId: userStore.accountId // 始终用登录人Id
    });
    if (res.data && res.data.code === 200) {
      showToast('添加成功');
      setTimeout(() => router.back(), 1000);
    } else {
      showToast(res.data?.msg || '添加失败');
    }
  } catch (error) {
    console.error('添加患者错误:', error);
    showToast('网络错误，请稍后重试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.patient-view-page {
  height: 100%;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
}
.form-section {
  background: #fff;
  margin-top: 12px;
  padding-bottom: 24px;
}
.form-title {
  color: #999;
  font-size: 14px;
  padding: 16px 16px 0 16px;
}
.submit-btn {
  margin: 32px 16px 0 16px;
}
.custom-action-sheet .van-action-sheet__content {
  border-radius: 20px 20px 0 0;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
}
.custom-action-sheet .van-action-sheet__header {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 8px;
}
.custom-action-sheet .van-action-sheet__item {
  font-size: 17px;
  padding: 22px 0 22px 0;
  text-align: center;
  color: #222;
  transition: background 0.2s;
}
.custom-action-sheet .van-action-sheet__item:active {
  background: #f2f3f5;
}
.custom-action-sheet .van-action-sheet__cancel {
  font-size: 16px;
  color: #666;
  margin-top: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.custom-action-sheet .van-action-sheet__gap {
  height: 18px;
}
@media (max-width: 480px) {
  .custom-action-sheet .van-action-sheet__content {
    max-width: 100vw;
  }
}
</style>
